<!--
 * @Author: 陆成杰
 * @Date: 2022-06-23 14:27:44
 * @LastEditTime: 2022-07-03 14:25:17
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/system-manager/AccountManager.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="1.5" style="margin-top:7px;margin-left: 60px;" class="acc">账户名：</el-col>
          <el-col :span="4" class="in">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <button><img src="../../assets/sou.png"></button>
          </el-col>

          <el-col :span="1.5" style="margin-top:7px;margin-left: 150px;" class="acc">所属机构：</el-col>
          <el-col :span="4">
            <el-select v-model="selectorga" slot="prepend" placeholder="请选择">
              <el-option label="城院罗老师测试" value="1"></el-option>
            </el-select>
          </el-col>

          <el-col :span="1.5" style="margin-top:7px;margin-left: 150px;" class="acc">所属角色：</el-col>
          <el-col :span="3">
            <el-select v-model="selectro" disabled slot="prepend" placeholder="请选择">
            </el-select>
          </el-col>
        </el-row>

        <el-row style="margin-top:30px;">
          <el-col :span="1.5" style="margin-top:7px;margin-left: 75px;" class="acc">状态：</el-col>
          <el-col :span="4">
            <el-select v-model="selectstate" slot="prepend" placeholder="所有">
              <el-option label="所有" value="1"></el-option>
              <el-option label="启用" value="2"></el-option>
              <el-option label="停用" value="3"></el-option>
            </el-select>
          </el-col>
          <el-button style="padding: 3px 0;width: 80px;position: absolute;right: 100px;" type="primary">查询</el-button>
          <el-button style="padding: 3px 0;width: 80px;position: absolute;right: 5px;" type="white">重置</el-button>
        </el-row>

        <!-- <el-button type="primary" class="createBtn">发布</el-button> -->
      </div>

    </el-card>
    <el-card style="margin-top:10px; height: 60px;" >
      <el-button style="float: right; width: 100px;" type="primary" @click="newaccount">新建账户</el-button>

      <el-dialog title="添加账户" :visible.sync="dialogFormVisible" v-model="dialogFormVisible" width="30%">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="账户名称" :label-width="formLabelWidth" prop="account">
            <el-input v-model="form.account" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="pwd">
            <el-input v-model="form.pwd" style="width:300px" show-password></el-input>
          </el-form-item>
          <el-form-item label="所属机构" :label-width="formLabelWidth" prop="organization">
            <el-select v-model="form.organization" placeholder="请选择所属机构">
              <el-option label="1" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属角色" :label-width="formLabelWidth" prop="role">
            <el-select v-model="form.role" disabled placeholder="请选择所属角色">
            </el-select>
          </el-form-item>
          <el-form-item label="账号状态" :label-width="formLabelWidth" prop="state">
            <el-select v-model="form.state" placeholder="请选择状态">
              <el-option label="启用" value="启用"></el-option>
              <el-option label="停机" value="停机"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="name">
            <el-input v-model="form.name" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input v-model="form.email" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
            <el-input v-model="form.phone" style="width:300px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="position: absolute;right: 5px;bottom: 5px;">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="newSystem">保存</el-button>
        </div>
      </el-dialog>

    </el-card>
    <!-- <el-card style="margin-top:10px"> -->
      <!-- table -->
      <el-table
        :data="tableData"
        style="width: 100%; font-size: 12px; margin-top:10px;"
        stripe
        :header-cell-style="{ background: 'rgb(35, 39, 56)', fontSize:'16px',color: '#fff' }"
        :cell-style="{cellStyle, background: 'rgb(41, 45, 62)', color: '#fff', fontSize:'15px'}"
      >
        <el-table-column
          width="120"
          prop="account"
          label="账户名"
        ></el-table-column>
        <el-table-column
          width="120"
          prop="organization"
          label="所属机构"
        ></el-table-column>
        <el-table-column
          width="100"
          prop="role"
          label="所属角色"
        ></el-table-column>
        <el-table-column
          width="100"
          prop="state"
          label="状态"
          class="state"
        ></el-table-column>
        <el-table-column
          width="100"
          prop="name"
          label="真实姓名"
        ></el-table-column>
        <el-table-column
          width="120"
          prop="phone"
          label="手机号"
        ></el-table-column>
        <el-table-column
          width="200"
          prop="email"
          label="邮箱"
        ></el-table-column>
        <el-table-column
          width="110"
          prop="time"
          label="更新时间"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="用户类型"
        ></el-table-column>
        <el-table-column
          width="200"
          prop="operation"
          label="操作">
          <template #default="scope">
            <el-button type="text" size="middle" @click="putSystem(scope.$index, scope.row)" class="stop">{{scope.row.state=='启用'?'停机':'启用'}}</el-button>
            <el-button @click="updateSystem(scope.$index, scope.row)" type="text" size="middle">编辑</el-button>
            <el-button type="text" size="middle" @click="deleteSystem(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      

   

    <!-- </el-card> -->
  </div>
</template>

<script>
import { request } from '../../axios/request';
import { getSystemList, putSystem, postSystem, delSystem, updateSystem } from "../../axios/system";
import moment from "moment";
export default {
  data() {
    return {
      input:'',
      selectorga:'',
      selector:'',
      selectstate:'',
      tableData: [ ],
      User:[],
      ID:[],
      dialogFormVisible: false,
      form: {
        account: '',
        pwd:'',
        organization: '',
        role: '',
        state:'',
        name:'',
        phone:'',
        email:'',
      },
      formLabelWidth: '80px',
      rules:{
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, message: '长度在 3 个字符以上', trigger: 'blur' }
          ],
        pwd:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, message: '长度至少3个以上', trigger: 'blur' }],
        organization: [{ required: true, message: '请选择', trigger: 'change' }],
        // role: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
        state:[{ required: true, message: '请选择', trigger: 'change' }],
        name:[{ required: true, message: '请输入活动名称', trigger: 'blur' },],
        phone:[
          { required: true, message: '请输入电话', trigger: 'blur' },
          // {  type: 'number', message: '年龄必须为11位的数字值'}
          ],
        email:[
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
      }
    };
  },
  created(){
    this.getSystemApi()
  },
  methods: {
    //搜索
    searchId() {},
    handleClick(row) {
      console.log(row);
    },
    deleteSystem(index,row){
      for(let i=0;i<this.User.length;i++){
        if(this.User[i].Username==row.account){
          console.log(this.User[i].ID)
          const userId = (this.User[i].ID).toString()
          console.log(userId)
          delSystem(userId).then(request=>{
            window.location.replace("/accountmanager")
            console.log('删除')
          })
        }
      }
    },
    putSystem(index,row){
      for(let i=0;i<this.User.length;i++){
        if(this.User[i].Username==row.account){
          console.log(this.User[i])
          const userId = (this.User[i].ID).toString()
          // console.log(userId)
          putSystem(userId).then(request=>{
            // if(this.User[i].Status==='停用'){
            //   console.log(1)
            //   this.isStop='重启'
            // }
            window.location.replace("/accountmanager")
            console.log('停机')
          })
        }
      }

    },
    updateSystem(index,row){
      this.dialogFormVisible = true
      console.log(this.User)
      for(let i=0;i<this.User.length;i++){
        if(this.User[i].Username==row.account){
          console.log(this.User[i])
          this.form.account=this.User[i].Username
          this.form.pwd=this.User[i].Passwd
          this.form.organization=this.User[i].OrganizationID
          this.form.state=this.User[i].Status
          this.form.name=this.User[i].RealName
          this.form.email=this.User[i].Email
          this.form.phone=this.User[i].Phone
        }
      }

    },
    newaccount(){
      this.dialogFormVisible=true
      this.form={}
    },
    newSystem(){
      postSystem(this.form.account,this.form.pwd,1,this.form.state,this.form.name,this.form.email,this.form.phone).then(request=>{
        console.log(request)
        window.location.replace("/accountmanager")
      })
      this.dialogFormVisible = false
    },
    getSystemApi(){
      getSystemList().then(request =>{
        console.log(request.users)
        this.User=request.users
        this.totalCount=request.users.length
        let data=request.users
        data.forEach(element => {
          this.tableData.push(
            {
              account:element.Username,
              organization:element.OrganizationID,
              phone:element.Phone,
              name:element.RealName,
              time:element.UpdatedAt,
              state:element.Status,
              email:element.Email
            }
          )
        });
        for (let i = 0; i < this.tableData.length; i++) {
          // console.log(state.tableData[i].UpdatedAt);
          this.tableData[i].time = moment(
            this.tableData[i].time
          ).format("YYYY-MM-DD HH:mm:ss");
        }
        // console.log(this.tableData)
      })
    }
  },
};
</script>

<style lang="less" scoped>
.el-card{
  background-color: rgb(41, 45, 62);
  border: 0px;
}
.box-card{
  .acc{
    color: white;
  }
  .in{
    background-color: white;
    display: flex;
    border-radius: 5px;
    input{
      background-color: rgb(35, 39, 56);
      height: 30px;
      width: 120px;
      border:0px;
      margin-right: 3px;
    }
    button{
      width: 30px;
      height: 30px;
      border-radius: 5px;
      background-color: white;
      border: 0px;
      img{
        width: 60%;
        height: 50%;
        margin-top: 5px;
      }
    }
  }
}
.el-table{
  .stop{
    color: red;
  }
}
</style>